<template>
  <section class="nav">
    <div  
      :class="(currentValue==item.value)?'btn active':'btn'" 
      v-for="(item,index) in btnList" 
      :key="index"
      @click="currentValue=item.value"
      :style="(currentValue==item.value)?`background:url(${item.activeUrl}) left center no-repeat`:`background:url(${item.url}) left center no-repeat`">
      {{item.value}}
    </div>
  </section>
</template>

<script>
export default {
  name: "Nav",
  props: {
    title:{
      type: String,
      default:'丰图精准决策数字底板'
    }
  },
  data() {
    return {
      currentValue:'社区管理',
      btnList:[
        {
          value:'社区管理',
          url:require('@src/assets/img/nav-btn-community.png'),
          activeUrl:require('@src/assets/img/nav-btn-community-active.png')
        },
        {
          value:'棚屋改造',
          url:require('@src/assets/img/nav-btn-pwgz.png'),
          // activeUrl:require('@src/assets/img/nav-btn-pwgz-acitve.png')
        },
        {
          value:'资源环境',
          url:require('@src/assets/img/nav-btn-zyhj.png'),
          activeUrl:require('@src/assets/img/nav-btn-zyhj-active.png')
        },
        {
          value:'公共安全',
          url:require('@src/assets/img/nav-btn-safe.png'),
          activeUrl:require('@src/assets/img/nav-btn-safe-active.png')
        },
        {
          value:'POI更新',
          url:require('@src/assets/img/nav-btn-POI.png'),
          activeUrl:require('@src/assets/img/nav-btn-POI-active.png')
        },
      ]
    };
  },
  mounted() {
     
  },
  methods: {
    
  },
  beforeDestroy() {
      
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .nav{
    position: absolute;
    right: 1420px;
    top: 58px;
    display: flex;
    .btn{
      padding-left: 104px;
      font-size: 42px;
      color: #BBBBBB;
      box-sizing: border-box;
      margin-right: 80px;
      height: 74px;
      line-height: 74px;
      background-size: 70.1px 63.7px!important;
      cursor: pointer;
      &.active{
        background-size: 74px 74px!important;
        color: #03DCEF;
        transition: all .3s;
      }
      &:nth-last-of-type(1){
        margin-right: 0;
      }
    }
  }
</style>
